<template>
	<view class="content">
		<view class="navBar">
			<view class="bar-item" :class="tabNum == 1 ? 'item-active' : ''" @tap="changeBar(1)">
				综合
				<view class="item-bottom" v-if="tabNum == 1"></view>
			</view>
			<view class="bar-item" :class="tabNum == 2 ? 'item-active' : ''" @tap="changeBar(2)">
				销量
				<view class="item-bottom" v-if="tabNum == 2"></view>
			</view>
			<view class="bar-item" :class="tabNum == 3 ? 'item-active' : ''" @tap="changeBar(3)">
				距离
				<view class="item-bottom" v-if="tabNum == 3"></view>
			</view>
		</view>

		<view class="list-area">
			<view class="list-item" v-for="(item,index) in storeList" v-if="item.examine==1" :key="index">
				<view class="list-item-img"><image :src="item.portrait" mode=""></image></view>
				<view class="list-item-infos">
					<view class="list-item-title">{{item.storeName}}</view>
					<view class="list-item-sel">销量：{{item.sell}}</view>
					<view class="list-item-sel">地址：{{item.address}}</view>
				</view>
				<view class="list-item-locate">{{item.distance}}km</view>
			</view>
		</view>
	</view>
</template>

<script>
import config from '@/common/config.js';
export default {
	data() {
		return {
			apiUrl: config.apiHost,
			userId: uni.getStorageSync('userId'),
			tabNum: 1,
			storeList: []
		};
	},
	onLoad() {
		this.getList()
	},
	methods: {
		changeBar(num) {
			this.tabNum = num;
			this.getList()
		},
		getList() {
			uni.request({
				url: this.apiUrl + '/api/store/selectStoreByType',
				method: 'POST',
				contentType: 'application/jason',
				data: {
					type: this.tabNum,
					userLat: uni.getStorageSync('lat'),
					userLon: uni.getStorageSync('lon'),
					// userLat: 32.05838,
					// userLon: 118.79647,
				},
				success: res => {
					if (res.data.code == 200) {
						this.storeList = res.data.data
						console.log(this.storeList)
					}
				}
			});
		},
	}
};
</script>

<style>
.content {
	width: 100%;
	height: 100%;
}
.navBar {
	width: 100%;
	height: 70upx;
	border-top: 1upx solid rgba(241, 241, 241, 0.7);
	box-shadow: 0px 4upx 8upx 0px rgba(241, 241, 241, 0.5);
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
}

.bar-item {
	width: 33.3%;
	height: 70upx;
	line-height: 70upx;
	font-size: 30upx;
	font-family: PingFangSC;
	color: rgba(75, 75, 75, 1);
	text-align: center;
}

.item-active {
	color: #ef6b4f;
}
.item-bottom {
	width: 56upx;
	height: 2upx;
	bottom: 10upx;
	margin: -10upx auto;
	background-color: #ef6b4f;
}

.list-area {
	width: 100%;
	height: 100%;
	background-color: #fff;
}

.list-item {
	margin-left: 30upx;
	height: 220upx;
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1upx solid #f5f5f5;
}

.list-item-img {
	width: 140upx;
	height: 140upx;
	margin-top: 46upx;
}

.list-item-img image {
	width: 100%;
	height: 100%;
	border-radius: 15upx;
}

.list-item-locate {
	line-height: 220upx;
	text-align: right;
	position: absolute;
	right: 30upx;
}

.list-item-infos {
	padding-top: 48upx;
	margin-left: 12upx;
}

.list-item-title {
	width: 100%;
	height: 44upx;
	font-size: 32upx;
	line-height: 44upx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: rgba(34, 34, 34, 1);
}

.list-item-sel {
	margin-top: 12upx;
	width: 100%;
	height: 34upx;
	line-height: 34upx;
	font-size: 24upx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(102, 102, 102, 1);
}
</style>
